<template>
  <div>
    <navigation></navigation>
    <div class="categoryitem">
      <div class="categoryname" v-if="gName">
        {{ gameList[0].gtName }}
      </div>
      <div class="categoryitem-all">
        <ul>
          <li v-for="(item, index) in gameList" :key="index">
            <category-item-comp :gameItem="item"></category-item-comp>
          </li>
        </ul>
      </div>
      <div v-if="nones" class="noenmessage">没有更多数据了</div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
import { getCategoryGame } from "../../../network/gameCategory";

import Bottom from "../../../components/bottom/bottom";
import Navigation from "../../../components/navigation/navigation";
import CategoryItemComp from "./categoryItemComp";
export default {
  components: { Navigation, Bottom, CategoryItemComp },
  name: "CategoryItem",
  data() {
    return {
      gameList: [],
      gName: false,
      pages: 1,
      nones: false,
    };
  },
  created() {
    this.getGame();
  },
  mounted() {
    window.addEventListener("scroll", this.scrollNav);
  },

  methods: {
    getGame() {
      let gid = window.location.pathname.split("/")[3];
      getCategoryGame(gid, this.pages).then((res) => {
        if (this.pages > res.data.data.pages) {
          this.gName = true;
        } else {
          this.pages += 1;
          this.gameList.push(...res.data.data.list);
          this.nones = true;
          this.gName = true;
        }
      });
      console.log(this.gameList, this.gName);
    },

    scrollNav() {
      let bottom =
        document.documentElement.scrollHeight -
        document.documentElement.scrollTop -
        document.documentElement.clientHeight;
      if (bottom < 150 && !this.nones) {
        this.getGame();
      }
    },
  },
};
</script>

<style>
.categoryitem {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 0.5rem;
}
.categoryname {
  font-size: 0.15rem;
  margin-top: 0.2rem;
}

.categoryitem-all {
  width: 100%;
  overflow: auto;
}

.categoryitem-all ul {
  width: 100%;
  list-style: none;
}

.categoryitem-all ul li {
  width: 25%;
  float: left;
  margin-top: 0.4rem;
}

.category-box {
  width: 90%;
  display: flex;
}

.category-topimg {
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.15rem;
}

.category-topimg img {
  width: 100%;
  height: 100%;
  border-radius: 0.15rem;
  cursor: pointer;
}

.category-bottom {
  width: 60%;
  border-bottom: 1px solid rgb(172, 170, 168);
  cursor: pointer;
}

.category-bottom:hover .cgame-name {
  color: rgb(36, 184, 242);
}

.category-xing {
  display: flex;
  align-items: center;
}

.category-xing div {
  display: flex;
  align-items: center;
}

.category-xing img {
  width: 0.1rem;
  margin-right: 0.01rem;
}

.category-xing span {
  font-size: 0.09rem;
  margin-left: 0.05rem;
}

.bossd {
  display: flex;
  align-items: center;
  margin-top: 0.08rem;
}

.cgame-name {
  width: 100%;
  font-size: 0.11rem;
  margin-top: 0.05rem;
  margin-bottom: 0.06rem;
}

.bossd div:nth-child(1) {
  font-size: 0.08rem;
  color: rgb(150, 147, 147);
}

.bossd div:nth-child(2) {
  font-size: 0.08rem;
  padding: 0.04rem 0.06rem 0.04rem 0.06rem;
  border-radius: 0.02rem;
  background-color: rgb(236, 236, 236);
  cursor: pointer;
  color: rgb(36, 184, 242);
  margin-left: 0.4rem;
}

.bossd div:nth-child(2):hover {
  background-color: rgb(229, 247, 255);
}

.noenmessage {
  margin-top: 0.5rem;
  font-size: 0.12rem;
  text-align: center;
}
</style>